<template>
  <div class="jyzt">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="margin-top: 20px">
        <el-card>
          <div v-for="el in tableData" :key="el.title" class="tableItem" @click="onItemClick(el)">
            <div class="content">
              <div class="top">
                <div class="circle"></div>
                <div class="title">{{ el.title }}</div>
              </div>
              <div class="time">{{ el.time }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog v-model="dialog.visible" class="customDialog" :title="dialog.title" width="500px">
      <el-form ref="demoFormRef" class="queryForm" :model="form" label-width="100px">
        <!-- readonly="readonly" -->
        <!-- <el-form-item label="租户编号" prop="tenantId">
          <el-input v-model="form.tenantId" />
        </el-form-item> -->
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="发布时间" prop="fbsj">
          <el-input v-model="form.fbsj" />
        </el-form-item>
        <el-form-item label="文化内容" prop="content">
          <el-input v-model="form.content" type="textarea" :autosize="{ minRows: 2 }" />
        </el-form-item>
        <el-form-item label="所属村" prop="ssc">
          <el-input v-model="form.ssc" />
        </el-form-item>
        <el-form-item label="所属乡镇" prop="ssxz">
          <el-input v-model="form.ssxz" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
        <el-form-item label="图片" prop="ssxz">
          <imageUpload v-model="form.file" :is-show-tip="false" :disabled="true" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
const cyzlValue = ref();
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
import useMapStore from '@/store/modules/map';

const queryParams = ref<OnlineQuery>({
  pageNum: 1,
  pageSize: 10,
  ssc: useMapStore().szxcCountryText,
  lmId: '2'
});

const tableData = ref([]);
const getUrl = (icon) => {
  console.log('ii', icon);

  return new URL(`../../../assets/szxc/${icon}.png`, import.meta.url).href;
};
// onMounted(() => {
//   nextTick(() => {
//   });
// });

const totalCount = ref(0);
const demoFormRef = ref<ElFormInstance>();
const initFormData = {
  id: undefined,
  tenantId: undefined,
  title: undefined,
  fbsj: undefined,
  content: undefined,
  tp: undefined,
  ssc: undefined,
  ssxz: undefined,
  remark: undefined,
  file: undefined
};
const data = reactive({
  form: { ...initFormData }
});
const { form } = toRefs(data);
const dialog = reactive<DialogOption>({
  visible: false,
  title: '详情信息'
});
const loading = ref(false);
const title = ref('');
const reset = () => {
  form.value = { ...initFormData };
  demoFormRef.value?.resetFields();
};

const getList = () => {
  $szxcapi.hmfwQuery(queryParams.value).then(({ rows = [], total = 0 }) => {
    tableData.value = rows;
    totalCount.value = total;
  });
};

// 查看详情
const onItemClick = async (el) => {
  reset();
  const _id = el?.id;
  const res = await $szxcapi.infoQuery({ id: _id });
  Object.assign(form.value, res.data);
  dialog.visible = true;
};

const country = ref(useMapStore().szxcCountryText);
watch(
  () => useMapStore().szxcCountryText,
  (value) => {
    country.value = value;
    queryParams.value.ssc = value;
    getList();
  }
);

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  .el-card {
    background: #178af01a;
  }
  .circle {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: linear-gradient(0deg, #4ab1ff, #ffffff);
    border-radius: 2px;
    margin-right: 10px;
  }
  .tableItem {
    margin-bottom: 10px;
    cursor: pointer;

    color: white;
    border-bottom: 1px solid rgba(74, 177, 255, 0.2);

    .content {
      height: 30px;
      display: flex;
      justify-content: space-between;
      .top {
        display: flex;
        align-items: center;
      }
    }
    // .left {
    //   width: 160px;
    //   height: 100%;
    // }
    // .right {
    //   flex: 1;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: space-between;
    //   .top {
    //     .title {
    //       font-size: 18px;
    //       line-height: 30px;
    //     }
    //   }
    // }
  }
}
</style>
